import cn from 'classnames';
import React from 'react';
import s from './style.module.css';
import {
  Button,
  Table,
  Dialog,
  Tooltip
} from '@knownsec/react-component';
import i from '@/index.module.css';
import CopyText from '@/components/copy'

function SentAlert({data=[],type,changeShow}) {
  const tip=(e)=>{
    return (
      e?<Tooltip overlay={<CopyText text={e}></CopyText>}
        placement="topLeft"
      ><span>{e}</span></Tooltip>:'--' )
  }
  const columns=[
    [
      {
        title: '业务系统名称',
        dataIndex: 'name',
        render:(e) => {
          return tip(e)
        }
      },
      {
        title: '业务系统地址',
        dataIndex: 'target',
        render:(e) => {
          return tip(e)
        }
      },
      {
        title: '失败原因',
        dataIndex: 'cause',
        className: s.w_17,
        render:(e) => {
          return tip(e)
        }
      },
    ],
    [
      {
        title: '任务组名称',
        dataIndex: 'name',
        render:(e) => {
          return tip(e)
        }
      },
      {
        title: '业务系统地址',
        dataIndex: 'target',
        render:(e) => {
          return tip(e)
        }
      },
      {
        title: '失败原因',
        dataIndex: 'cause',
        className: s.w_17,
        render:(e) => {
          return tip(e)
        }
      },
    ]];

  return (
    <Dialog
      title={'任务下发失败'}
      visible={data}
      confirmText=""
      cancelText=""
      className={s.w600}
      onhide={() => {changeShow(false);}}
    >
      <div className={cn(i.tac, s.dioBtn)}>
        <p className={s.title}>以下任务组或业务系统立即检测任务下发失败：</p>
        <div className={s.tableBox}>
          <Table
            columns={columns[type]}
            data={data}
          ></Table>
        </div>
        <div className={s.btnBox}>
          <Button
            className={i.vam}
            onClick={() => {
              changeShow(false);
            }}
          >取消</Button>
          <Button
            type="primary"
            className={cn(i.ml24, i.vam)}
            onClick={() => {
              changeShow(false);
            }}
          >确定</Button>
        </div>
        
      </div>
    </Dialog>
  );
}
export default SentAlert;
